<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jqGrid：强大的表格插件的应用-Helloweba演示平台</title>

<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/fancybox.css" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/jquery.message.js" type="text/javascript"></script>

</head>

<body>

<div id="main">

<h2 class="top_title"><a href="#">jqGrid表格应用——读取与查询数据</a></h2>

<div class="grid_table">
     <div id="opt">
        <div id="query">
            <label>编号：</label><input type="text" class="input" id="sn" />
            <label>名称：</label><input type="text" class="input" id="title" />
            <input type="submit" class="btn" id="find_btn" value="查 询" />
        </div>
        <input type="button" class="btn" id="add_btn" value="新 增" />
        <input type="button" class="btn" id="del_btn" value="删 除" />
     </div>
     <table id="list"></table>
     <div id="pager"></div>
</div>

&nbsp;
</div>

<div id="footer">
    &nbsp;
</div>

<script type="text/javascript">
$("#list").jqGrid({
	url:'do.php?action=list',  //请求数据的url地址
	datatype: "json",  //请求的数据类型
   	colNames:['编号','名称','主屏尺寸','操作系统','电池容量', '价格(￥)','操作'], //数据列名称（数组）
   	colModel:[ //数据列各参数信息设置
   		{name:'sn',index:'sn', editable:true, width:80,align:'center', title:false},
   		{name:'title',index:'title', width:180, title:false},
   		{name:'size',index:'size', width:120},
		{name:'os',index:'os', width:120},
   		{name:'charge',index:'charge', width:100,align:'center'},
		{name:'price',index:'price', width:80,align:'center'},
   		{name:'opt',index:'opt', width:80, sortable:false, align:'center'}		
   	],
   	rowNum:10, //每页显示记录数
   	rowList:[10,20,30], //分页选项，可以下拉选择每页显示记录数
   	pager: '#pager',  //表格数据关联的分页条，html元素
	autowidth: true, //自动匹配宽度
	height: 290,   //设置高度
	gridview:true, //加速显示
    viewrecords: true,  //显示总记录数
	multiselect: true,  //可多选，出现多选框
	multiselectWidth: 25, //设置多选列宽度
	sortable:true,  //可以排序
	sortname: 'id',  //排序字段名
    sortorder: "desc", //排序方式：倒序，本例中设置默认按id倒序排序
	loadComplete:function(data){ //完成服务器请求后，回调函数
		if(data.records==0){ //如果没有记录返回，追加提示信息，删除按钮不可用
			$("p").appendTo($("#list")).addClass("nodata").html('找不到相关数据！');
			$("#del_btn").attr("disabled",true);
		}else{ //否则，删除提示，删除按钮可用
			$("p.nodata").remove();
			$("#del_btn").removeAttr("disabled");
		}
	}
 });
$(function(){
	$("#add_btn").click(function(){
		$.fancybox({
			'type':'ajax',
			'href':'addGrid.html'
		});
	});
	$("#del_btn").click(function(){
		var sels = $("#list").jqGrid('getGridParam','selarrrow');
	    if(sels==""){
		   alert('请选择要删除的项！')
	    }else{
		   if(confirm("您是否确认删除？")){
		    $.ajax({
              type: "POST",
              url: "do.php?action=del",
			  data: "ids="+sels,
			  beforeSend: function() {
                   $().message("正在请求...");
              },
			  error:function(){
				   $().message("请求失败...");
			  },
              success: function(msg){
				   if(msg!=0){
					   var arr = msg.split(',');
					   $.each(arr,function(i,n){
							 if(arr[i]!=""){
								 $("#list").jqGrid('delRowData',n); 
							 }
		               });
		               $().message("已成功删除!");
				   }else{
					   $().message("操作失败！");
				   }
              }
            });
	       }
	    }
	});
	
	$("#find_btn").click(function(){
		var title = escape($("#title").val()); //对字符串进行编码
	    var sn = escape($("#sn").val());       //对字符串进行编码
	    $("#list").jqGrid('setGridParam',{
			url:"do.php?action=list",
			postData:{'title':title,'sn':sn},
			page:1
		}).trigger("reloadGrid");
	});
});
</script>

</body>
</html>
